<template>
  <div>
    props
    <!-- {{ data }} -->

    <hr style="margin: 20px 0" />

    <!-- emit -->
    <button @click="send">派发</button>

    <hr style="margin: 20px 0" />

    <!-- slot -->
    <slot :item="{ a: 1, b: 2 }" :index="3"></slot>
  </div>
</template>

<script generic="T" setup lang="ts">
// 常用于定义组件名称
defineOptions({
  name: "A",
});

// **************************************

// props VUE 3.3 新特性 [使用 generic 增加了对泛型的支持]
defineProps<{
  data: T[];
}>();

// 设定默认值形式
// withDefaults(defineProps<{ data: T[] }>(), {
//   data: () => [],
// });

// **************************************

// emit VUE 3.3 新特性 [写法更精简]
const emit = defineEmits<{
  send: [name: string];
}>();

const send = () => {
  emit("send", "Jake");
};

// **************************************

// defineSlots VUE 3.3 新特性 [只能声明没有实现，只能声明 TS 类型，不能传递参数，用于约束插槽的数据类型提示]
interface IProps {
  item: { a: number; b: number };
  index: number;
}

defineSlots<{
  default: (props: IProps) => void; // 匿名插槽
}>();
</script>

<style scoped></style>
